<template>
  <div>
    <div class="header-container">
      <!-- 头部 srearch 头像 -->
      <div class="left-search_btn">
        <img src="~images/default/home_search_icon.png">
      </div>
      <div class="right-user_info">
        <div class="user_name">姓名</div>
        <div class="user_avatar">
          <img src="~images/theme/avatar.png">
        </div>
      </div>
      <!-- 中间 统计信息 -->
      <div class="statis_title">
        <span>请假</span>
        <span>今日未归寝（人）</span>
      </div>
      <div class="leave-total-icon">
        <img src="~images/default/home_leave_icon.png" alt="">
      </div>
      <div class="leave-total-text">{{statisInfo.leaveNum | formateStatisTotal}}</div>
      <div class="not-total-icon">
        <img src="~images/default/home_late_icon.png" alt="">
      </div>
      <div class="not-total-text">{{statisInfo.notStay | formateStatisTotal}}</div>
      <!-- Tabbar  切换-->
      <div class="tab-bar_container">
        <div class="item" @click="handlerNavSwitch(0)">
         <span class="item-icon"><img src="~images/navbar/panel.png"/></span>
         <span class="item-text">看板</span>
       </div>
       <div class="item" @click="handlerNavSwitch(1)">
         <span class="item-icon"><img src="~images/navbar/leave.png"/></span>
         <span class="item-text">请假</span>
       </div>
       <div class="item" @click="handlerNavSwitch(2)">
         <span class="item-icon"><img src="~images/navbar/record.png"/></span>
         <span class="item-text">记录</span>
       </div>
      </div>
       <!-- Tabbar active -->
      <div class="tab-bar-active_1" v-show="$route.fullPath === '/panel'">
        <div class="item-icon"><img src="~images/navbar/panel_active.png"/></div>
        <div class="item-name">看板</div>
        <div class="item-bottom-line"></div>
      </div>
      <div class="tab-bar-active_2" v-show="$route.fullPath === '/leave'">
          <div class="item-icon"><img src="~images/navbar/leave_active.png"/></div>
          <div class="item-name">请假</div>
          <div class="item-bottom-line"></div>
      </div>
      <div class="tab-bar-active_3" v-show="$route.fullPath === '/record'">
        <div class="item-icon"><img src="~images/navbar/record_active.png"/></div>
        <div class="item-name">记录</div>
        <div class="item-bottom-line"></div>
      </div>
    </div>
    <!-- Tabbar动态切换组件 -->
    <div class="card-router-container">
      <router-view />
      <div style="height:20px"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MasterSta',
  data() {
    return {
      comName: [
        'Panel',
        'Leave',
        'Record',
      ],
      currentIndex: this.$store.state.currentIndex,
      statisInfo: {},
    }
  },
  computed: {
    getCurrentIndex() {
      return this.$store.state.currentIndex
    },
  },
  created() {
    this.getStatistics()
  },
  methods: {
    handlerNavSwitch(value) {
      switch (value) {
        case 0:
          this.$router.push('panel')
          break
        case 1:
          this.$router.push('leave')
          break
        case 2:
          this.$router.push('record')
          break
      }
    },
    getStatistics() {
      this.$api.home.getStatisticsT({}).then(res=> {
        this.statisInfo = res.data
      })
    },
  },
}
</script>
<style lang="scss" scoped>
@import '~styles/default/home.scss';
</style>
